<template>
    <div class="select-container">
        <div class="select-name" @mouseover="mouseOver" @mouseleave="mouseLeave" @click="handleList" :style="customStyle">
            <label :class="['name', setName ? '' : 'placeholder']">{{setName || (placeholder ? placeholder : '请选择')}}</label>
            <div class="option-btn">
                <div v-if="showClear && clearable" class="option" @click.prevent.stop="clearValue">
                    <close-one theme="outline" size="15" fill="#abced8"/>
                </div>
                <div v-else class="option arrow-btn">
                    <down theme="outline" size="15" fill="#abced8"/>
                </div>
            </div>
        </div>
        <div :class="['select-list', showList ? 'select-visible' : '']" :style="{height: showList ? wrapHeight + 'px' : 0}" id="more-oprate">
            <div class="select-bg"></div>
            <ScrollBar
                autoHide
                :forData="data.length"
                :ScrollTop="0"
                :listenScrollBottom="listenScrollBottom" 
                :listenScrollTop="listenScrollTop" 
                :listenScroll="listenScroll"
            >
                <ul class="select-content-list" ref="selectContent">
                    <li v-for="(item, index) in data" :key="item.id" :data-index="index" :data-id="item.id" @click.prevent.stop="getItem(index)" :class="['select-item', item.id == modelValue ? 'select-active' : '']">
                        <label>{{item.name}}</label>
                    </li>
                </ul>
            </ScrollBar>
        </div> 
    </div>
  
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { toRefs, ref, watch, nextTick, onMounted } from 'vue'
import { CloseOne, Down }  from '@icon-park/vue-next';
import ScrollBar from '../ScrollBar/index.vue'
export default {
    name: 'SelectItem',
    props: {
        data: {
            type: Array,
            default() {
                return []
            }
        },
        modelValue: {
            type: String,
            default: ''
        },
        clearable: {
            type: Boolean,
            default: false
        },
        customStyle: {
            type: Object,
            default() {
                return {}
            }
        },
        placeholder: {
            type: String,
            default: ''
        },
        valueName: {
            type: String,
            default: ''
        }
    },
    emits: ['update:modelValue'],
    components: {
        CloseOne,
        Down,
        ScrollBar
    },
    setup(props, context) {
        const { data, modelValue, valueName } = toRefs(props)
        let setName = ref(null)
        let showClear = ref(false)
        let showList = ref(false)
        let selectItem = ref(null)
        let ScrollTop = ref(0)
        let selectContent = ref(null)
        let wrapHeight = ref(0)
        const getItem = (index) => {
            if(!valueName.value) {
                context.emit('update:modelValue', String(data.value[index].id))
            }else{
                context.emit('update:modelValue', String(data.value[index][valueName.value]))
            }
            setName.value = data.value[index].name
            context.emit('change', data.value[index].name)
            showList.value = false
        }
        watch(() => data.value,
            () => {
                wrapHeight.value = data.value.length * 28
            },
            {
                deep: true
            }
        )
        watch(() => modelValue.value,
            (newVal, oldVal) => {
                checkValue(newVal || oldVal)
            },
            {
                deep: true
            }
        )
        // 滚动条事件
        const listenScrollBottom = () => {}
        const listenScrollTop = () => {}
        const listenScroll = () => {}

        const checkValue = (val) => {
            if(valueName.value){
                const result = data.value.find(item => {
                    return item[valueName.value] == val
                })
                if(result) {
                    setName.value = result.name
                }
            }else{
                const result = data.value.find(item => {
                    return item.id == val
                })
                if(result) {
                    setName.value = result.name
                }
            }
        }
        const clearValue = () => {
            setName.value = ''
            showClear.value = false
            context.emit('update:modelValue', '')
        }
        const mouseOver = () => {
            if(setName.value) {
                showClear.value = true
            }
        }
        const mouseLeave = () => {
            showClear.value = false
        }
        const handleList = () => {
            showList.value = !showList.value
        }
        onMounted(() => {
            checkValue(modelValue.value)
            wrapHeight.value = data.value.length * 28
            document.addEventListener('mouseup',(e) =>{
                var _con = document.getElementById('more-oprate')
                if(_con) {
                    if(!_con.contains(e.target)) {
                        showList.value = false
                    }
                }
            })
        })
        return {
            setName,
            getItem,
            clearValue,
            showClear,
            showList,
            mouseOver,
            mouseLeave,
            handleList,
            listenScrollBottom,
            listenScrollTop,
            listenScroll,
            selectItem,
            ScrollTop,
            selectContent,
            wrapHeight
        }
    }
}
</script>

<style scoped lang="scss">
.select-container{
    position: relative;
    flex: auto;
    .select-name{
        border-bottom: 1px solid var(--ss-color-primary-light);
        padding-bottom: 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background: #fff;
        .name{
            flex: 1;
            overflow: hidden;
            font-size: 13px;
            cursor: pointer;
        }
        .placeholder{
            color: var(--ss-color-placeholder);
        }
        .option-btn{
            height: 15px;
            .option{
                height: 15px;
            }
            :deep(.i-icon){
                line-height: 10px;
                transition: .2s;
            }
            .arrow-btn{
                &:hover{
                    :deep(.i-icon){
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
    .select-list{
        position: absolute;
        left: 1px;
        right: 1px;
        z-index: 5;
        background: #fff;
        border-radius: 4px;
        box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
        margin-top: 2px;
        top: 24px;
        padding: 4px 0 0;
        // overflow: hidden;
        visibility: hidden;
        opacity: 0;
        .select-item{
            font-size: 13px;
            color: #666;
            padding: 5px 10px;
            cursor: pointer;
            &:hover{
                background: var(--ss-color-primary-light);
                color: var(--ss-color)
            }
        }
        .select-active{
            color: var(--ss-color)
        }
        .select-content-list{
            position: relative;
        }
        .select-bg{
            position: absolute;
            top: -24px;
            left: 0;
            right: 0;
            z-index: 10;
            height: 24px;
        }
    }
    .select-visible{
        max-height: 150px;
        opacity: 1;
        transition: .1s;
        visibility: visible;
    }
}
</style>